<template>
    <div>
    <van-tabbar v-model="active" @change="handleSwitchTo()">
        <van-tabbar-item
          v-for="item in tabBarList"
          :icon="item.icon"
          :name="item.linkTo"
          :key="item.id"
        >{{item.name}}</van-tabbar-item>
    </van-tabbar>
    </div>
</template>

<script>
    export default {
        name: "ButtonTabBar",
        data() {
            return {
                active: 0,
                tabBarList:[
                    {id:1,name:"首页",icon:"wap-home-o",linkTo:"/"},
                    {id:2,name:"直播",icon:"video-o",linkTo:"/video"},
                    {id:3,name:"分类",icon:"coupon-o",linkTo:"/cate"},
                    {id:4,name:"购物车",icon:"shopping-cart-o",linkTo:"/shopping"},
                    {id:5,name:"个人中心",icon:"user-circle-o",linkTo:"/user"},
                ]
            };
        },
        methods:{
            handleSwitchTo(){
                console.log(this.active)
                this.$router.push(this.active)
            }
        }
    }
</script>

<style scoped>

</style>